<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-04-28 16:48:16
 * @LastEditors: william
 * @LastEditTime: 2025-08-11 15:24:58
-->
<template>
  <div class="toolbar-item-container">
    <div class="toolbar-item-container-icon" @click="handleOpen">
      <img class="common-icon" src="@/assets/file.svg" />
    </div>
    <div ref="refEmojiDialog" class="toolbar-item-container-dialog">
      <div class="image-upload">
        <input
          ref="refFileInput"
          type="file"
          data-type="file"
          accept="*"
          @change="sendImageInWeb"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const refFileInput = ref(null)

const emit = defineEmits(['sendFile'])

onMounted(() => {
  //
})

const handleOpen = _ => {
  refFileInput.value.click()
}

const sendImageInWeb = e => {
  if (e?.target?.files?.length <= 0) return
  emit('sendFile', e?.target?.files)
  e.target.value = ''
}
</script>

<style lang="scss" scoped>
.toolbar-item-container-dialog {
  display: none;
}
</style>
